<template>
       <div class="box">
         <!-- 菜单折叠 -->
         <a  href="javascript:void(0);" :title="isCollapse ? '展开' : '折叠'" @click="sCollapse" class="item_icon">
            <component :is="Fold"
                style="width: 30px; height: 30px;display: flex;color: #000;;align-items: center;"
                :class="isCollapse?'Turnleft':'Turnright'"></component>
        </a>
        <!-- 菜单折叠 -->


        <!-- 面包屑开始 -->
        <el-breadcrumb :separator-icon="ArrowRight" class="item_breadcrumb">
            <el-breadcrumb-item :to="{ path: '/index/home' }">{{$t('homepage')}}</el-breadcrumb-item>
            <template v-if="$route.name !='home'">
                <el-breadcrumb-item v-for="item in $route.matched.slice(1)">
                    {{$t(item.meta.title)}}
                </el-breadcrumb-item>
            </template>
        </el-breadcrumb>
        <!-- 面包屑结束 -->
       </div>
</template>

<script lang="ts" setup>
import { Fold, ArrowRight } from "@element-plus/icons-vue";
import { ref, defineEmits } from "vue";
import { useRoute } from "vue-router";
let router = useRoute()
const isCollapse = ref(false);
// 自定义事件名
const emit = defineEmits<{
    (e:'receiveCollapse',isCollapse:boolean):void
}>()

const sCollapse = () => {
    emit("receiveCollapse", isCollapse.value = !isCollapse.value);
};



</script>

<style lang="less" scoped>
    .box{
        display: flex;
        height: 100%;
        align-items: center;
    }
.item_icon {
   display: flex;
   height: 100%;
   align-items: center;
}
.el-breadcrumb {
    display: flex;
    align-items: center;
}
.Turnright {
    //向右边旋转180deg
    transform: rotate(180deg);
    transition-duration: 1s;
}

.Turnleft {
    //向左边旋转360deg
    transform: rotate(360deg);
    transition-duration: 1s;
}

.item_breadcrumb {
    margin: 0px 20px;
}
</style>
